<template>
  <div
    ref="previewContent"
    style="
      width: 100%;
      height: 100%;
      background: transparent;
      display: flex;
      justify-content: center;
      align-items: flex-start;
    "
  >
    <div :style="mainStyle" class="pre_view" id="pre_view" style v-if="baseData.length > 0">
      <span :style="printTimeStyle" v-if="baseData[0].showPrintTime">打印时间：{{ baseData[0].printTime }}</span>
      <div class="logo" :style="logoStyle" v-if="baseData[2].logo.selected">
        <el-image style="width: 100%; height: 100%" :src="baseData[2].logo.url" fit="contain"></el-image>
      </div>
      <div class="title" :style="titleStyle">{{ baseData[2].titleStyle.content }}</div>
      <div class="title" :style="subTitleStyle">{{ baseData[2].subTitleStyle.content }}</div>
      <div class="bill_head" :style="billHeadStyle">
        <div :style="billHeadLeftStyle">
          <div v-for="(item, index) in baseData[4].columnData" :key="index">
            <div v-if="item.selected && item.props == 'riqi'" :style="{ 'margin-right': scale * 30 + 'px' }">
              {{ item.name }}： {{ item.value }}
            </div>
          </div>
        </div>
        <div :style="billHeadRightStyle">
          <div v-for="(item, index) in baseData[4].columnData" :key="index">
            <div v-if="item.selected && item.props != 'riqi'" :style="{ 'margin-left': scale * 30 + 'px' }">
              {{ item.name }}： {{ item.value }}
            </div>
          </div>
        </div>
      </div>
      <div style="width: 100%; display: flex; justify-content: flex-start; height: auto">
        <div class="bill_body" id="bill_body" :style="billBodyStyle" v-if="twohead">
          <el-table
            ref="tableRef"
            :key="twohead"
            style="border: 1px solid black"
            highlight-current-row
            :header-cell-style="headerCellStyle"
            :cell-style="cellStyle"
            :data="baseData[5].tableData"
            width="100%"
          >
            <template v-for="(item, index) in baseData[5].columnData">
              <el-table-column :label="item.label" v-if="item.morenState">
                <template v-for="(v, i) in item.subset">
                  <el-table-column
                    v-if="v.morenState"
                    :key="i"
                    :prop="v.props"
                    :label="v.morenName"
                    :width="Math.ceil(v.width * scale)"
                  ></el-table-column>
                </template>
              </el-table-column>
            </template>
            <div
              slot="append"
              style="display: flex; background: #ededed"
              class="append"
              v-if="this.baseData[5].columnData.length > 0"
            >
              <!-- 只显示合计 + 共几条明细 -->
              <!-- <div :style="{ width: 80 * scale + 'px', 'flex-shrink': 0 }">
                <div style="text-align: center; width: 100%" :style="tableFootStyle">{{ getshowValue('', 0) }}</div>
              </div>
              <div style="text-align: right; padding-right: 2px" :style="tableFootStyle">{{ getshowValue('', 1) }}</div> -->
              <div v-if="baseData[0].type" :style="tableFootStyleByabs">
                <span style="margin-right: 20px">合计</span>
                共{{ baseData[5].tableData.length }}条明细
              </div>
              <template v-for="(item, sumIndex) in twoheadList">
                <div
                  v-if="item.morenState"
                  class="append-item"
                  :style="{
                    width: Math.ceil((item.width || (isPrint ? 80 : 82)) * scale) + 'px',
                    height: parseInt(scale * baseData[3].footHeight),
                    padding: '2px 3px',
                    flexShrink: 0,
                  }"
                >
                  <!-- <div v-if="sumIndex == 0" style="text-align: center;" :style="tableFootStyle">合计</div> -->
                  <div style="text-align: left; padding-right: -1px;" :style="tableFootStyle">
                    {{ getshowValue(item, sumIndex) }}
                  </div>
                </div>
              </template>
            </div>
          </el-table>
        </div>
        <div class="bill_body" id="bill_body" :style="billBodyStyle" v-else>
          <el-table
            ref="tableRef"
            style="border: 1px solid black"
            highlight-current-row
            :header-cell-style="headerCellStyle"
            :cell-style="cellStyle"
            :data="baseData[5].tableData"
            width="100%"
            :key="twohead"
          >
            <!-- <el-table-column :resizable="false" label="序号" type="index" align="center"></el-table-column> -->
            <template v-for="(item, index) in baseData[5].columnData">
              <el-table-column
                v-if="item.morenState"
                :label="item.morenName"
                :prop="item.props"
                :width="Math.ceil(item.width * scale)"
              >
              </el-table-column>
            </template>
            <div
              slot="append"
              style="display: flex; background: #ededed"
              class="append"
              v-if="this.baseData[5].columnData.length > 0"
            >
              <!-- 只显示合计 + 共几条明细 -->
              <!-- <div :style="{ width: 80 * scale + 'px', 'flex-shrink': 0 }">
                <div style="text-align: center; width: 100%" :style="tableFootStyle">{{ getshowValue('', 0) }}</div>
              </div>
              <div style="text-align: right; padding-right: 2px" :style="tableFootStyle">{{ getshowValue('', 1) }}</div>
            </div> -->
              <div v-if="baseData[0].type" :style="tableFootStyleByabs">
                <span style="margin-right: 20px">合计</span>
                共{{ baseData[5].tableData.length }}条明细
              </div>
              <template v-for="(item, sumIndex) in baseData[5].columnData">
                <div
                  v-if="item.morenState"
                  class="append-item"
                  :style="{
                    width: Math.ceil(item.width * scale) + 'px',
                    height: parseInt(scale * baseData[3].footHeight),
                    padding: '2px 3px',
                    flexShrink: 0,
                  }"
                >
                  <!-- <div v-if="sumIndex == 0" style="text-align: center;" :style="tableFootStyle">合计</div> -->
                  <div style="text-align: left; padding-right: -1px" :style="tableFootStyle">
                    {{ getshowValue(item, sumIndex) }}
                  </div>
                </div>
              </template>
            </div>
          </el-table>
          <!-- 只显示合计 + 共几条明细 -->
          <!-- <div
            style="width: 100%; display: flex; background: #ededed; border: 1px solid black; margin-top: -6px"
            class="append"
          >
            <div :style="{ width: 80 * scale + 'px', 'flex-shrink': 0 }">
              <div style="text-align: center; width: 100%" :style="tableFootStyle">{{ getshowValue('', 0) }}</div>
            </div>
            <div style="text-align: right; padding-right: 2px" :style="tableFootStyle">{{ getshowValue('', 1) }}</div>
          </div> -->
        </div>
      </div>

      <div class="bill_foot" :style="billFootStyle">
        <div :style="billFootLeftStyle">
          <div v-for="(item, index) in baseData[6].columnData" :key="index">
            <div v-if="item.selected" :style="{ 'margin-right': scale * 30 + 'px' }">
              {{ item.name }}： {{ item.value }}
            </div>
          </div>
        </div>
        <!-- <div :style="billFootRightStyle">
          <span style="margin-right: 10px;">制单人：{{baseData[6].otherData.createName}}</span>
          <span>制单日期：{{baseData[6].otherData.createOrderDate}}</span>
        </div>-->
      </div>
      <span :style="technicalSupportStyle">象过河软件技术支持</span>
      <div :style="bottomStyle" class="bottom">
        <div
          v-for="item in baseData[7].qrList"
          :key="item.id"
          style="display: flex; align-items: center; justify-content: flex-end"
        >
          <template v-if="item.selected">
            <span :style="{ 'font-size': scale * 10 + 'px' }">{{ item.title }}</span>
            <div :style="qrImgStyle">
              <img :style="{ width: '100%', height: '100%' }" :src="item.url" />
            </div>
          </template>
        </div>
      </div>
      <!-- <span :style="technicalSupportStyle">象过河软件技术支持</span> -->
    </div>
  </div>
</template>
<script>
import { del } from 'vue'
import total from './totalStatic.js'
import { formatMoney, formatNumber, accAdd, delcommafy } from '../../utils'
export default {
  props: {
    baseData: Array,
    tipsData: Object,
    isPrint: Boolean,
  },
  data() {
    return {
      dialogVisible: false,
      text: '',
      isUpdate: false,
      tableData: [],
      codeList: [],
      finishStatus: false,
      inputFocus: false,
      domReady: false,
      scale: 1, //比例
      printTime: '',
      twohead: false, // 两个表头
      width: 0,
      total: '',
      twoheadList: [],
    }
  },
  created() {
    this.total = JSON.parse(JSON.stringify(total))
  },
  mounted() {
    let that = this
    this.$nextTick(() => {
      that.domReady = true
    })
  },
  activated() {
    // let preView = document.getElementById('pre_view')
    // console.log(preView);
  },
  computed: {
    mainStyle() {
      if (this.domReady) {
        let item = {
          title: '纸张尺寸',
          unfold: false,
          sort: 2,
          padding: {
            top: 10,
            bottom: 10,
            left: 20,
            right: 20,
          },
          typeValue: 'A4',
          type: [
            {
              lx: 'A4',
              selected: true,
            },
            {
              lx: 'A5',
              selected: false,
            },
          ],
          directionValue: '横向',
          direction: [
            {
              lx: '横向',
              selected: true,
            },
            {
              lx: '纵向',
              selected: false,
            },
          ],
        }
        let s = this.baseData.padding
        let padding = item.padding
        if (!this.baseData || this.baseData.length <= 0) {
        } else {
          padding = this.baseData[1].padding
          item = this.baseData[1]
          let head = this.baseData[4].columnData
          if (!head || head.length <= 0) {
            this.twohead = false
          } else {
            this.twohead = head[0].twohead || false
          }
          console.log(this.twohead)
        }
        if (this.twohead) {
          this.twoheadList = []
          this.baseData[5].columnData.forEach((item) => {
            this.twoheadList.push(...item.subset)
          })
        }
        let w = 0
        let h = 0
        // if (item.directionValue == '横向') {
        w = item.typeValue == 'A4' ? 1123 : 794
        h = item.typeValue == 'A4' ? 794 : 559
        // } else {
        //   w = item.typeValue == 'A4' ? 794 : 559
        //   h = item.typeValue == 'A4' ? 1123 : 794
        // }
        w = w - 20
        h = h - 60
        let tScale = w / h

        let availableWidth = this.$refs.previewContent.offsetWidth ? this.$refs.previewContent.offsetWidth - 40 : w
        let width = Math.min(w, availableWidth)
        this.scale = width / w
        // let availableHeight = this.$refs.previewContent.offsetHeight ? this.$refs.previewContent.offsetHeight - 40 : h
        // let availableScale = availableWidth / availableHeight

        // let width = 0
        // let height = 0
        // if (tScale >= availableScale) {
        //   width = availableWidth
        //   height = availableWidth / tScale
        // } else {
        //   height = availableHeight
        //   width = availableHeight * tScale
        // }
        // this.scale = width / w
        // this.width = width

        // if (this.scale >= 1) {
        //   this.scale = 0.7
        //   height = height * this.scale
        //   width = width * this.scale
        // }
        // console.log('比例：', this.scale)

        let params = {
          width: width + 'px',
          // height: '100%',
          'padding-top': this.scale * padding.top + 'px',
          'padding-bottom': this.scale * padding.bottom + 'px',
          'padding-left': this.scale * padding.left + 'px',
          'padding-right': this.scale * padding.right + 'px',
          backgroundColor: '#fff',
          position: 'relative',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
        }

        if (this.isPrint) {
          // console.log(JSON.stringify(this.baseData[5].tableData))
          // let tableHeight = parseInt(this.baseData[3].headHeight) + this.baseData[5].tableData.length * parseInt(this.baseData[3].rowHeight)
          // console.log(tableHeight)
          params = {
            width: width + 'px',
            // 'height': tableHeight + 20 + 'px',
            height: '100%',
            'padding-top': this.scale * padding.top + 'px',
            'padding-bottom': this.scale * padding.bottom + 'px',
            'padding-left': this.scale * padding.left + 'px',
            'padding-right': this.scale * padding.right + 'px',
            backgroundColor: '#fff',
            position: 'relative',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            // overflow: 'auto',
          }
        }
        return params
      }
    },
    // logo
    logoStyle() {
      return {
        position: 'absolute',
        top: this.scale * 50 + 'px',
        left: this.scale * 58 + 'px',
        'z-index': 1,
        width: this.scale * 109 + 'px',
        height: this.scale * 36 + 'px',
      }
    },
    // 主标题
    titleStyle() {
      let item = this.baseData[2].titleStyle
      return {
        'margin-top': this.scale * 20 + 'px',
        'font-size': this.scale * item.size + 'px',
        'font-weight': item.bold ? '600' : '400',
        'text-decoration': item.underline ? 'underline' : 'none',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    // 副标题
    subTitleStyle() {
      let item = this.baseData[2].subTitleStyle
      return {
        'margin-top': this.scale * 3 + 'px',
        'font-size': this.scale * item.size + 'px',
        'font-weight': item.bold ? '600' : '400',
        'text-decoration': item.underline ? 'underline' : 'none',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    billHeadStyle() {
      return {
        fontSize: 12 + 'px',
        marign: '10px 0 5px',
        width: '100%',
        display: 'flex',
        justifyContent: 'space-between',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    billHeadLeftStyle() {
      return {
        fontSize: 12 + 'px',
        display: 'flex',
        flexWrap: 'wrap',
        marginRight: 10 + 'px',
        alignItems: 'center',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    billHeadRightStyle() {
      return {
        fontSize: 12 + 'px',
        display: 'flex',
        whiteSpace: 'nowrap',
        // flexDirection: 'column',
        alignItems: 'center',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    billBodyStyle() {
      return {
        // width: '100%',
        overflow: 'hidden',
        overflowX: 'clip',
        margin: '5px 0',
        // margin: '15px 0',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    tableFootStyle() {
      let h = parseInt(this.scale * this.baseData[3].footHeight)
      let size = this.baseData[2].tableBody.size
      let height = Math.max(20, h)
      return {
        // height: height + 'px',
        fontWeight: this.baseData[2].tableBody.bold ? '600' : '400',
        fontSize: this.scale * size + 'px',
        // lineHeight: height + 'px',
        // borderRight: '1px solid #e3e3e3',
        // minHeight: '20px',
        padding: '2px 3px',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    headerCellStyle() {
      console.log(this.scale * this.baseData[3].headHeight)
      let size = this.baseData[2].tableHead.size
      console.log('字体大小', size)
      return {
        textAlign: 'center',
        height: this.scale * this.baseData[3].headHeight + 'px',
        borderRight: '1px solid black',
        borderBottom: '1px solid black',
        backgroundColor: '#ededed',
        // width: this.width + 'px',
        color: '#000000',
        fontSize: this.scale * size + 'px',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    cellStyle() {
      let h = parseInt(this.scale * this.baseData[3].rowHeight)
      let height = Math.max(20, h)
      let size = this.baseData[2].tableBody.size
      return {
        borderRight: '1px solid black',
        borderBottom: '1px solid black',
        textAlign: 'center',
        height: height + 'px',
        // width: this.width + 'px',
        minHeight: '20px',
        color: '#000000',
        fontSize: this.scale * size + 'px',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    billFootStyle() {
      return {
        fontSize: this.scale * 10 + 'px',
        marign: '10px 0 5px',
        width: '100%',
        display: 'flex',
        justifyContent: 'space-between',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    billFootLeftStyle() {
      return {
        display: 'flex',
        flexWrap: 'wrap',
        alignItems: 'flex-start',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    billFootRightStyle() {
      return {
        display: 'flex',
        whiteSpace: 'nowrap',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    qrImgStyle() {
      return {
        width: this.scale * 60 + 'px',
        height: this.scale * 60 + 'px',
        // 'padding': this.scale * 5 + 'px',
        margin: this.scale * 10 + 'px',
      }
    },
    // 技术支持
    technicalSupportStyle() {
      return {
        'font-size': this.scale * 10 + 'px',
        // 'position': 'absolute',
        // 'bottom': this.scale * 12 + 'px',
        width: '100%',
        textAlign: 'left',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    printTimeStyle() {
      let padding = this.baseData[1].padding
      return {
        'font-size': this.scale * 8 + 'px',
        position: 'absolute',
        top: this.scale * (padding.top + 12) + 'px',
        right: this.scale * 22 + 'px',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    bottomStyle() {
      let padding = this.baseData[1].padding
      return {
        bottom: this.scale * padding.bottom + 'px',
        left: this.scale * padding.left + 'px',
        right: this.scale * padding.right + 'px',
        // position: 'absolute',
        width: '100%',
        display: 'flex',
        justifyContent: 'flex-end',
        alignItems: 'flex-end',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    tableFootStyleByabs(item) {
      let h = parseInt(this.scale * this.baseData[3].footHeight)
      let height = Math.max(20, h)
      // console.log(item);
      return {
        height: height + 'px',
        fontSize: 12 + 'px',
        fontWeight: this.baseData[2].tableBody.bold ? '600' : '400',
        lineHeight: height + 'px',
        minHeight: '20px',
        padding: '0 10px',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
        boxSizing: 'border-box',
        textAlign: 'right',
        position: 'absolute',
        left: '0px',
        width: 'max-content',
        zIndex: '10',
      }
    },
  },
  methods: {
    // 合计列计算
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
        } else if (index === 1) {
          sums[index] = '共' + data.length + '条明细'
        } else {
          sums[index] = ''
        }
      })
      return sums
    },
    // 合计列计算
    getshowValue(item, index, parted = false) {
      let back = ''
      let moneyArr = []
      let numberArr = []
      if (
        this.baseData[0].type == '库存分布查询' ||
        this.baseData[0].type == '收入明细表-按往来单位' ||
        this.baseData[0].type == '收入明细表-按部门' ||
        this.baseData[0].type == '收入明细表-按业务员' ||
        this.baseData[0].type == '支出明细表-按往来单位' ||
        this.baseData[0].type == '支出明细表-按部门' ||
        this.baseData[0].type == '支出明细表-按业务员'
      ) {
        if (this.baseData[0].type == '库存分布查询') {
          for (const key in this.baseData[5].tableData[0]) {
            if (key.toLowerCase().includes('price')) {
              moneyArr.push(key)
            } else if (key.toLowerCase().includes('opnumber')) {
              numberArr.push(key)
            }
          }
        } else {
          for (let i = 0; i < this.baseData[5].columnData.length; i++) {
            moneyArr.push(this.baseData[5].columnData[i].props)
            delete moneyArr[0]
            delete moneyArr[1]
          }
        }
      } else {
        moneyArr = this.total.total[this.baseData[0].type].moneyArr
        numberArr = this.total.total[this.baseData[0].type].numberArr
      }
      if (moneyArr.includes(item.props) || numberArr.includes(item.props)) {
        let list = this.baseData[5].tableData
        let result = 0.0
        for (let i = 0; i < list.length; i++) {
          const element = list[i]
          let aval = element[item.props]
          if (aval == '******') {
            result = aval
          } else {
            let num = delcommafy(aval)
            result += num
          }
        }
        console.log(result);
        
        if (moneyArr.includes(item.props)) {
          if (item.props == 'grossProfitMargin') {
            back = ''
          } else {
            back = result == '******' ? '' : this.$formatMoney(result)
          }
        } else {
          back = result == '******' ? '' : this.$formatNumber(result)
        }
      }
      return back
    },
  },
}
</script>

<style lang="scss" scoped media="print">
.pre_view {
  background-color: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  color: #000000;
}

.bottom_view {
  position: absolute;
  // bottom: 0;
  // width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.qr_item {
  display: flex;
  align-items: center;
}

// .qr_img {
//   // background-color: red;
// }

.bill_head {
  margin: 10px 0 5px;
  width: 100%;
  display: flex;
  justify-content: space-between;

  .left {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
  }

  .right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    white-space: nowrap;
  }
}

.bill_foot {
  margin: 10px 0 5px;
  width: 100%;
  display: flex;
  justify-content: space-between;

  .left {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .right {
    display: flex;
    white-space: nowrap;
  }
}

.bill_body {
  // width: 100%;
  // padding-bottom: 5%;
  overflow: over;
  overflow-x: clip;
}

::v-deep .el-table {
  border-right: none !important;
  box-sizing: border-box;
  height: 100%;
  th,
  td {
    padding: 0;
    color: #666;
    box-sizing: border-box;
    border-collapse: separate !important;
    .cell {
      display: flex;
      align-items: center;
      // font-size: 12px;
      padding: 2px 3px;
      line-height: 16px;
      // white-space: nowrap;
    }
  }

  th {
    .cell {
      // background: transparent;
      justify-content: center;
      // border-bottom: 1px solid black;
    }
  }

  .el-table__body tr:hover > td {
    // background: transparent;
  }

  .el-table__footer-wrapper {
    td {
      // background: transparent;
      border: none;
    }
  }

  ::-webkit-scrollbar {
    display: none;
  }

  // .el-table--border {
  //   border: 2px solid #e3e3e3;
  // }

  // .el-table td.el-table__cell,
  // .el-table th.el-table_cell.is-leaf {
  //   border: 2px solid #e3e3e3;
  // }

  // .el-table--border::after,
  // .el-table--group::after,
  // .el-table::before {
  //   border: #e3e3e3;
  // }
}
.append .append-item:last-child {
  border-right: 1px solid black !important;
  flex-shrink: 0;
}
::v-deep .el-table::after {
  background: transparent !important;
}
</style>
<style>
@media print {
  /* 确保边框正常显示 */
  .el-table {
    border: none !important;
    border-top: 1px solid black !important;
    border-bottom: 1px solid black !important;
  }
  .el-table__body tr > td:first-child {
    border-left: 1px solid black !important;
  }
  .el-table__body tr > td {
    border-top: 1px solid black !important;
    border-collapse: collapse !important;
  }
  .el-table th {
    background: unset !important;
  }
  .el-table th:first-child {
    border-left: 1px solid black !important;
  }
  .el-table th:last-child {
    border-right: 1px solid black !important;
  }
  .el-table tr {
    background-color: transparent;
    page-break-inside: avoid;
  }
  .append {
    background: unset !important;
    border-left: 1px solid black !important;
  }
  .el-table::before {
    background: transparent !important;
  }
  .el-table::after {
    background: transparent !important;
  }
}
</style>
